<!DOCTYPE html>
<html>
<head>
    <title>Astroid Curve</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="astroidCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('astroidCanvas');
        const ctx = canvas.getContext('2d');

        // Define drawing parameters
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const A_param = 160; // Amplitude 'A' from the equation
        const axisExtension = 60;
        const axisLength = A_param + axisExtension;
        
        // --- 1. Draw Coordinate Axes ---
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        // x-axis
        ctx.moveTo(cx - axisLength, cy);
        ctx.lineTo(cx + axisLength, cy);
        // y-axis
        ctx.moveTo(cx, cy - axisLength);
        ctx.lineTo(cx, cy + axisLength);
        ctx.stroke();

        // --- 2. Draw the Astroid Curve ---
        ctx.beginPath();
        const steps = 360;
        for (let i = 0; i <= steps; i++) {
            const phi = (i / steps) * 2 * Math.PI;
            const x = cx + A_param * Math.pow(Math.cos(phi), 3);
            const y = cy - A_param * Math.pow(Math.sin(phi), 3); // y is inverted in canvas
            if (i === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        }
        ctx.stroke();

        // --- 3. Draw the Shaded Area at Point A ---
        const pointAx = cx - A_param;
        const pointAy = cy;
        ctx.beginPath();
        ctx.moveTo(pointAx, pointAy);
        ctx.lineTo(pointAx + 15, pointAy - 8);
        ctx.lineTo(pointAx + 15, pointAy + 8);
        ctx.closePath();
        ctx.fillStyle = '#4A4A4A'; // Dark gray color
        ctx.fill();

        // --- 4. Draw Labels ---
        ctx.fillStyle = 'black';
        const labelFont = "italic 24px 'Times New Roman'";
        ctx.font = labelFont;

        // Label 'O' at the origin
        ctx.fillText('O', cx + 8, cy + 24);

        // Label 'A' at (-A, 0)
        ctx.fillText('A', cx - A_param - 35, cy + 10);
        
        // Label 'B' at (0, -A)
        ctx.fillText('B', cx + 10, cy + A_param + 28);
        
        // Label 'P' on the curve in the 2nd quadrant (phi = 3*pi/4)
        const phi_P = 3 * Math.PI / 4;
        const Px = cx + A_param * Math.pow(Math.cos(phi_P), 3);
        const Py = cy - A_param * Math.pow(Math.sin(phi_P), 3);
        ctx.fillText('P', Px - 38, Py - 8);

        // Axis labels 'x' and 'y'
        const axisFont = "italic 22px 'Times New Roman'";
        ctx.font = axisFont;
        ctx.fillText('x', cx + axisLength - 15, cy + 25);
        ctx.fillText('y', cx + 15, cy - axisLength + 25);

    </script>
</body>
</html>